<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：

    -->
    <div id="demo">
        <label>{{lable}}</label><br>
        v-bind:属性名  <input type="text" v-bind:value="single"><br>
              :  <input type="text" :value="simpleSingle"><br>
        javascript  <button onclick="jsButton()">js事件</button><br>
        v-on:属性名 <button v-on:click="eventButton()">事件绑定-请猛击</button><br>
        @<button v-on:click="add()">点我助力梦想</button><span>v-on: 简写为@ {{val}}</span><br>
        @<button v-on:click="reduce">点我增加难度</button><span>方法引用也可以不加()除非要传参数  {{valy}}</span><br>
        数据双向绑定 <input type="text" v-model="doubleBind">内容变化会影响初始值<br><br>
        
        <input type="text" v-model="val">
        <input type="text" v-model="valy">
        <h2>计算属性简写 {{v}}</h2>
        <input v-model="v2">计算属性get和set</h2>
    </div>
    <script type="text/javascript">
        function jsButton(){
            console.log(2222)
        }
        Vue.config.productionTip = false //关闭生产提示
        new Vue({
            el:"#demo",
            data:{
                //初始化原始参数
                lable:"插值语法，{{括号内}}，用于标签体",
                single:"指令语法，单向数据绑定，用于标签内 ",
                simpleSingle:"v-bind: 简写为:",
                val: 1,
                valy:1,
                doubleBind:1
            },
            methods: {
                eventButton(){
                    console.log(1111)
                },
                add(){
                    this.val++ //获取属性需要用this
                },
                reduce(){
                    this.valy --
                }
            },
            computed:{
                //计算属性
                v(){
                    return this.val+this.valy
                },
                v2:{
                    get(){
                        return this.val+this.valy;
                    },
                    set(value){
                        this.val = value
                        this.valy = value
                    }
                }
            },
            watch:{
                doubleBind:{//监视属性或者计算属性
                    handler(n,o){//监视器默认的绑定的事件处理方法
                        this.add()
                        this.reduce()
                    },
                }
            }
        })
        
    </script>
    
</body>
</html>